// 使用原生 ES 语法，遵循安全与语义化规范
(function () {
  const { createApp } = Vue;

  // 1) 定义一个“全局组件”：hello-message
  // 通过 app.component(name, options) 在应用层进行全局注册，任何子组件都能使用
  const GlobalHello = {
    name: 'HelloMessage',
    // props 定义对外暴露的“输入参数”，并进行类型校验与默认值处理
    props: {
      username: {
        type: String,
        required: true,
        // 额外的运行时校验，确保传入的是非空字符串
        validator: (val) => typeof val === 'string' && val.trim().length > 0,
      },
    },
    // 组件模板只能有一个根元素，这里用一个卡片包裹内容
    template: `
      <section class="card">
        <h3>全局组件：HelloMessage</h3>
        <p>你好，<span class="component-tag">{{ username }}</span>！欢迎学习 Vue 组件。</p>
      </section>
    `,
  };

  // 2) 定义一个“局部组件”：LocalDemo
  // 在根组件中通过 components 选项进行局部注册，只在当前组件内有效
  const LocalDemo = {
    name: 'LocalDemo',
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      add() {
        // 简单的交互：点击按钮自增
        this.count += 1;
      },
    },
    template: `
      <section class="card">
        <h3>局部组件：LocalDemo</h3>
        <p>计数器当前值：<span class="component-tag">{{ count }}</span></p>
        <button type="button" @click="add">点我 +1</button>
      </section>
    `,
  };

  // 3) 创建根应用，并注册组件
  const app = createApp({
    // 在根组件内进行“局部注册”
    components: {
      LocalDemo,
    },
  });

  // 全局注册：对整个 app 生效
  app.component('hello-message', GlobalHello);

  // 4) 挂载到页面的 #app 容器
  app.mount('#app');
})();
